<template>
  <transition appear name="slide-fade">
    <div class="list-container">
      <header class="header">
        <h1 class="heading">排行榜</h1>
      </header>
      <div class="content">
        <nav>
          <button
            :class="{ active: rankingType === 'personal' }"
            @click="rankingType = 'personal'"
          >
            个人
          </button>
          <button
            :class="{ active: rankingType === 'team' }"
            @click="rankingType = 'team'"
          >
            团队
          </button>
        </nav>
        <div class="top-list">
          <div
            class="top-list-box"
            v-for="item in rankingList.slice(0, 3)"
            :key="item.userId"
          >
            <p
              class="user-name"
              style="margin: 0 0 5px 0"
              v-if="rankingType === 'personal'"
            >
              {{ item.username }}
            </p>
            <p class="user-name" v-else>
              {{ item.team_name }}
            </p>
            <p class="team-name" v-if="rankingType === 'personal'">
              {{ item.team_name }}
            </p>
            <p class="score">{{ item.score.toFixed(0) }}分</p>
          </div>
        </div>
        <div class="list">
          <div
            class="list-box"
            v-for="(item, index) in rankingList.slice(3)"
            :key="item.userId"
            :class="{
              active:
                (rankingType === 'personal' && item.userId === userId) ||
                (rankingType !== 'personal' && item.teamId === userTeamId),
            }"
          >
            <span class="rank">{{ index + 4 }}</span>
            <div class="user-name" v-if="rankingType === 'personal'">
              {{ `${item.username} (${item.team_name})` }}
            </div>
            <div class="user-name" v-else>{{ item.team_name }}</div>
            <div class="score">{{ item.score.toFixed(0) }}分</div>
          </div>
        </div>
        <div class="self list">
          <div class="list-box" v-if="me.rank !== 0">
            <span class="rank">{{ me.rank }}</span>
            <div class="user-name">{{ me.name }}</div>
            <div class="score" @click.self="showCertificate">
              {{ me.score.toFixed(0) }}分
            </div>
          </div>
        </div>
      </div>
    </div>
  </transition>
</template>

<script>
import { mapState, mapMutations } from 'vuex';
import { GET_USER_INFO } from '@/store/mutation-types';
import { personalRank, teamRank } from '@/api';

const getMe = (compareFn, genName) => (rankingList) => {
  if (!Array.isArray(rankingList)) {
    return {
      name: 'Whoami',
      rank: 0,
      score: 666,
    };
  }
  const index = rankingList.findIndex(compareFn);
  if (index >= 0) {
    const me = rankingList[index];
    return {
      name: genName(me),
      score: me.score,
      rank: index + 1,
    };
  }
  return {
    name: 'Whoami',
    rank: 0,
    score: 100,
  };
};

export default {
  name: 'RankingList',
  data() {
    return {
      rankingType: 'personal', // 排行榜类别，team或者personal
      rankingList: [],
      me: {
        name: 'Whoami',
        rank: 0,
        score: 100,
      },
    };
  },
  computed: mapState(['username', 'token', 'userId', 'userTeamId']),
  watch: {
    rankingType() {
      this.getList(this.rankingType);
    },
  },
  created() {
    this.getList(this.rankingType);
  },
  methods: {
    showCertificate() {
      this.$router.push({
        name: 'certificate',
        params: this.me,
      });
    },
    getList(type) {
      if (type === 'personal') {
        personalRank()
          .then(({ data }) => {
            if (Array.isArray(data.rank)) {
              this.rankingList = data.rank;
            }
            return this.rankingList;
          })
          .then((list) => {
            this.me = getMe(
              ({ userId }) => userId === this.userId,
              // eslint-disable-next-line camelcase
              ({ username, team_name }) => `${username} (${team_name})`,
            )(list);
          });
      } else {
        teamRank()
          .then(({ data }) => {
            if (Array.isArray(data.rank)) {
              // eslint-disable-next-line camelcase
              this.rankingList = data.rank.filter(({ team_name }) => team_name !== '无');
            }
            return this.rankingList;
          })
          .then((list) => {
            this.me = getMe(
              ({ teamId }) => teamId === this.userTeamId,
              // eslint-disable-next-line camelcase
              ({ team_name }) => team_name,
            )(list);
          });
      }
    },
    ...mapMutations({
      getUserInfo: GET_USER_INFO,
    }),
  },
  mounted() {
    this.getUserInfo();
  },
};
</script>

<style lang="scss" scoped src="./style.scss"></style>
